<template>
    <div class="customer-life-edit">
        <c-title text="修改资料"></c-title>
        <div class="box" style="margin-bottom: .625rem;">
            <van-cell-group>
                <van-field required v-model="name" label="姓名" placeholder="姓名" />
                <van-field v-model="tel" label="手机号" placeholder="手机号" />
            </van-cell-group>
        </div>
        <div class="button" :class="{ 'w375': fun.isPc() }">
            <button @click="submit">保存</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: "",
            tel: "",
        };
    },
    activated() {
        this.timerId = null;
        this.getDetail();
    }, 
    deactivated() {
        if (this.timerId) {
            clearTimeout(this.timerId);
        }
        this.timerId = null;
    },
    methods: {
        async getDetail() {
            let { result, msg, data } = await $http.post('plugin.customer-archive.frontend.customer-archive.get-customer-info', { customer_archive_id: this.$route.params.id }, '.');
            if (result) {
                this.name = data.name;
                this.tel = data.mobile;
            } else {
                this.$toast(msg);
            }
        },
        submit() {
            let json = {
                form: {
                    id: this.$route.params.id,
                    name: this.name,
                    mobile: this.tel
                }
            }
            $http.post("plugin.customer-archive.frontend.customer-archive.save-customer-info", json, '.').then(res => {
                this.$toast(res.msg);
                if (res.result) {
                    this.timerId = setTimeout(() => {
                        this.$router.go(-1);
                    }, 500);
                }
            })
        }
    }
};
</script>

<style scoped lang='scss'>
.w375 {
    width: 375px !important;
    left: 50% !important;
    transform: translateX(-50%);
}

::v-deep .van-cell-group {
    border-radius: .5rem;
    overflow: hidden;
}

::v-deep .van-field__label {
    font-weight: 500;
    font-size: .875rem;
    color: #00001C;
}

.customer-life-edit {
    .box-text {
        font-weight: 500;
        font-size: .875rem;
        color: #F15353;
        line-height: 1;
        text-align: right;
        margin-bottom: .5313rem;
    }

    .box {
        padding: .625rem .75rem;
    }

    .button {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3.75rem;
        display: flex;
        align-items: center;
        padding: 0 .75rem;
        background: #FFFFFF;
        box-shadow: 0rem -0.0313rem .3125rem .0313rem #F5F5F5;
        border-radius: 0rem 0rem 0rem 0rem;

        button {
            display: block;
            width: 100%;
            height: 2.5rem;
            background: var(--themeBaseColor);
            border-radius: 1.2813rem;
            font-weight: 500;
            font-size: .9375rem;
            color: #FFFFFF;
            border: none;
        }
    }
}
</style>